<template>
  <div>
    <div class="search-popup">
      <template v-if="searchLoading">
        <div class="loading-box">
          <TjLoading></TjLoading>
        </div>
      </template>
      <template v-else>
        <div>
          <div v-if="props.searchPeople.length !== 0" class="popup-content">
            <SearchItem
              v-for="item in props.searchPeople"
              :key="item.userId"
              :data="item"
              @clickSearchItem="clickSearchItem"
            />
          </div>
          <div v-else class="popup-content">
            <div class="no-child">
              <img src="../../../../assets/img/default_search_img_people@2x.png" alt="" />
              <div class="span">暂无成员</div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="search-popup-mask" @click="clickMask"></div>
  </div>
</template>
<script>
export default {
  name: 'SearchPopup'
};
</script>
<script setup>
import { defineProps, defineEmits, ref, watch, inject, onMounted } from 'vue';
import { TjTabPanel, TjTab, TjLoading } from 'tj-design-vue';
import SearchItem from './SearchItem.vue';
import NoData from './NoData.vue';
const props = defineProps({
  searchPeople: {
    type: Array
  },
  searchLoading: {
    type: Boolean
  }
});
console.log(props.searchPeople);
// 分组列表
const groupList = ref([]);
// 全部数据
const options = inject('options');
const emit = defineEmits(['clickCloseSaerch', 'clickSearchPeople']);
// 点击蒙版
const clickMask = () => {
  emit('clickCloseSaerch', true);
};
// 选中列表
const selectList = inject('selectList');
// 可选择最大人数
const maxCount = inject('maxCount');
const clickSearchItem = data => {
  emit('clickSearchPeople');
};
</script>

<style lang="less" scoped>
::v-deep(.tj-tabs__nav-item) {
  height: 32px !important;
  font-size: 12px !important;
}
.loading-box {
  width: 100%;
  height: 493px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-popup {
  position: absolute;
  top: 40px;
  width: 500px;
  // height: 488px;
  background: #ffffff;
  border-radius: 4px;
  padding: 0 6px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  .popup-content {
    margin-top: 8px;
    width: 100%;
    height: 493px;
    overflow: auto;
    padding-left: 8px;
    padding-right: 4px;
  }
}
.search-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 999;
}
.no-child {
  margin: auto;
  img {
    margin: 100px auto 0;
    width: 164px;
    height: 164px;
  }
  .span {
    font-size: 14px;
    text-align: center;
    font-family: Microsoft YaHei, Microsoft YaHei-400;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
}
</style>
